<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
	<title>管理学生成绩</title>
</head>
<body class="skin-2">
			<div class="main-content">
				<!-- #section:basics/content.breadcrumbs -->
				<div class="breadcrumbs" id="breadcrumbs">
					<script type="text/javascript">
						try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
					</script>

					<ul class="breadcrumb">
						<li>
							<i class="ace-icon fa fa-home home-icon"></i>
							<a>管理学生成绩</a>
						</li>
					</ul><!-- /.breadcrumb -->

					<!-- #section:basics/content.searchbox -->
					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
								<i class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
						</form>
					</div><!-- /.nav-search -->

					<!-- /section:basics/content.searchbox -->
				</div>

				<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content">
					<!-- #section:settings.box -->
					<div class="ace-settings-container" id="ace-settings-container">
						<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
							<i class="ace-icon fa fa-cog bigger-150"></i>
						</div>

						<div class="ace-settings-box clearfix" id="ace-settings-box">
							<div class="pull-left width-50">
								<!-- #section:settings.skins -->
								<div class="ace-settings-item">
									<div class="pull-left">
										<select id="skin-colorpicker" class="hide">
											<option data-skin="no-skin" value="#438EB9">#438EB9</option>
											<option data-skin="skin-1" value="#222A2D">#222A2D</option>
											<option data-skin="skin-2" value="#C6487E">#C6487E</option>
											<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
										</select>
									</div>
									<span>&nbsp; Choose Skin</span>
								</div>

								<!-- /section:settings.skins -->

								<!-- #section:settings.navbar -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar">
									<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
								</div>

								<!-- /section:settings.navbar -->

								<!-- #section:settings.sidebar -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar">
									<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
								</div>

								<!-- /section:settings.sidebar -->

								<!-- #section:settings.breadcrumbs -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs">
									<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
								</div>

								<!-- /section:settings.breadcrumbs -->

								<!-- #section:settings.rtl -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl">
									<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
								</div>

								<!-- /section:settings.rtl -->

								<!-- #section:settings.container -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container">
									<label class="lbl" for="ace-settings-add-container">
										Inside
										<b>.container</b>
									</label>
								</div>

								<!-- /section:settings.container -->
							</div><!-- /.pull-left -->

							<div class="pull-left width-50">
								<!-- #section:basics/sidebar.options -->
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover">
									<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact">
									<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight">
									<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
								</div>

								<!-- /section:basics/sidebar.options -->
							</div><!-- /.pull-left -->
						</div><!-- /.ace-settings-box -->
					</div>
					<!-- /.ace-settings-container -->
					<!-- /section:settings.box -->
					
					<!-- /section:settings.box -->
					<div class="page-content-area">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12 table-responsive">
									
									  	<div style="text-align:right">
									  		<!-- 搜索框 -->
										  	<form id="searchForm" class="form-inline center-block" style="margin:15px 50px;">
										  		<div class="input-group">
										  			<div class="input-group-addon">科目</div>
													<select class="form-control" id="subjectName" name="subjectName">
														
													</select>
												</div>
												<div class="input-group">
													<div class="input-group-addon">用户名</div>
													<input type="text" class="form-control" id="userName" name="userName" placeholder="用户名(学号)">
												</div>
												<div class="input-group">
													<div class="input-group-addon">真实姓名</div>
													<input type="text" class="form-control" id="name" name="name" placeholder="真实姓名">
												</div>
												<div class="input-group">
													<div class="input-group-addon">考试日期</div>
													<input type="date" class="form-control" id="examTime" name="examTime">
												</div>
												<button type="button" id="searchFormBtn" class ="btn btn-primary btn-sm">搜索</button>
											</form><!-- 搜索框 -->
									  	</div>
										
										<table id="sample-table-1" class="table table-condensed table-bordered table-hover">
											<thead>
												<tr>
													<th>编号</th>
													<th>学生姓名</th>
													<th>用户名(学号)</th>
													<th>科目名称</th>
													<th>成绩</th>
													<th>考试时间</th>
												</tr>
											</thead>
											<tbody>
												 <c:forEach items="${pager.dates}" var="examScore">
												 	<tr>
												 		<td>${examScore.scoreId}</td>
												 		<td>${examScore.user.name}</td>
												 		<td>${examScore.user.userName}</td>
												 		<td>${examScore.subject.name}</td>
												 		<td>${examScore.score}</td>
												 		<td>${examScore.examTime}</td>
												 	</tr>
												 </c:forEach>
												 <tr>
												 	<td colspan="6">
												 		<jsp:include page="../page/page.jsp">
												 			<jsp:param value="scores" name="url"/>
												 			<jsp:param value="${pager.totalSize}" name="items"/>
												 		</jsp:include>
												 	</td>
												 </tr>
											</tbody>
										</table>
									</div><!-- /.span -->
								</div><!-- /.row -->
							
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</div><!-- /.page-content -->
			</div><!-- /.main-content -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${pageContext.request.contextPath}/static/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/jquery.dataTables.bootstrap.js"></script>

		<!-- ace scripts -->
		<script src="${pageContext.request.contextPath}/static/assets/js/ace-elements.min.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace.min.js"></script>
		
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				
				//查询科目名和id
				$.ajax({
					type:"POST",
					url:"findSubjectNameAndId",
					dataType:"json",
					success:function(data){
						$("#searchForm select[id='subjectName']").append("<option value='0'>请选择</option>");
						for(var i in data){
							$("#searchForm select[id='subjectName']").append("<option value='" + data[i].subId + "'>" + data[i].name + "</option>");
						}
					}
				})
				
				//点击搜索按钮
				$("#searchForm #searchFormBtn").click(function(){
					//搜索条件至少要输入一个条件
					if($("#subjectName").val() != 0 || $("#name").val() != "" || $("#examTime").val() != "" || $("#userName").val() != ""){
						//搜索提示
						var html = "<tr><td colspan='6'>";
							html += "<div style='font-size:24px;line-height:350px;text-align:center;'>正在搜索";
							html += "<img src='${pageContext.request.contextPath}/static/img/search_2.gif'>";
							html +="</div></td></tr>";
						$("#sample-table-1 tbody").html(html);
						//传数据到后台进行搜索
						$.ajax({
							type:"POST",
							url:"searchExamScore",
							dataType:"json",
							data:$("#searchForm").serialize(),//序列化表单
							success:function(data){
								if(data.length > 0){
									var str = "";
									for(var i in data){
										str += "<tr>";
										str += "<td>" + data[i].scoreId + "</td>";
										str += "<td>" + data[i].name + "</td>";
										str += "<td>" + data[i].userName + "</td>";
										str += "<td>" + data[i].subjectName + "</td>";
										str += "<td>" + data[i].score + "</td>";
										str += "<td>" + data[i].examTime + "</td>";
										str += "</tr>";
									}
									$("#sample-table-1 tbody").html(str);
								}else{
									var html = "<tr><td colspan='6'>";
									html += "<div style='font-size:24px;line-height:350px;text-align:center;'>没有搜索结果";
									html +="</div></td></tr>";
								$("#sample-table-1 tbody").html(html);
								}
							}
						})
					}else{
						alert("至少输入一个查询条件")
					}
				})
				
				
				var oTable1 = 
				$('#sample-table-2')
				//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
				.dataTable( {
					bAutoWidth: false,
					"aoColumns": [
					  { "bSortable": false },
					  null, null,null, null, null,
					  { "bSortable": false }
					],
					"aaSorting": [],
			
					//,
					//"sScrollY": "200px",
					//"bPaginate": false,
			
					//"sScrollX": "100%",
					//"sScrollXInner": "120%",
					//"bScrollCollapse": true,
					//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
					//you may want to wrap the table inside a "div.dataTables_borderWrap" element
			
					//"iDisplayLength": 50
			    } );
				/**
				var tableTools = new $.fn.dataTable.TableTools( oTable1, {
					"sSwfPath": "../../copy_csv_xls_pdf.swf",
			        "buttons": [
			            "copy",
			            "csv",
			            "xls",
						"pdf",
			            "print"
			        ]
			    } );
			    $( tableTools.fnContainer() ).insertBefore('#sample-table-2');
				*/
			
			
				$(document).on('click', 'th input:checkbox' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			
			});
			$(function () {
			  $('[data-toggle="tooltip"]').tooltip()
			});
			
			
		</script>

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/docs/assets/js/themes/sunburst.css" />

		<script type="text/javascript"> ace.vars['base'] = '..'; </script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace/elements.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath}/static/assets/js/ace/ace.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/rainbow.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/generic.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/html.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/css.js"></script>
		<script src="${pageContext.request.contextPath}/static/docs/assets/js/language/javascript.js"></script>
	</body>
</html>